import React from "react";
import Scroll from "../../../baseUI/scroll";
import { Tab, Top, Item, Container,ItemList } from './SortRightItem.style'
import ChooseItem from "./chooseItem/ChooseItem";

const SortRightItem = (props) => {
    const { sortRightItem,sortList } = props
    return (
        <Container>
            <Scroll
                    direction="vertical"
                    refresh={true}
                >
            <Tab>
                <Top>
                    <img src="https://p0.meituan.net/750.0/travelcube/51bf9042d29227cd42770e15c52ad34076957.gif" alt="" />
                </Top>
                <Item>
                    <div className="sortRight-title">外卖外送</div>
                    {
                        sortRightItem.map((item, index) => {
                            return (
                                <div className="sortRight-item" key={index}>
                                        <img src={item.sortImg} alt="" />
                                    <div className="sortRightItem-title">{item.title}</div>
                                </div>
                            )
                        })
                    }
                </Item>
                <ItemList>
                    <div className="sortRight-choose">精品推荐</div>
                {
                    sortList.map((item, index) => (
                        <ChooseItem key={index} item={item} />
                        // <ListItem key={item.id} item={item} />
                    ))
                }
                </ItemList>
            </Tab>
            </Scroll>
        </Container>
    )
}

export default SortRightItem